<template>
	<div id="app">
		<hote-header />
		<div class="hote-admin-body">
			<hote-sidebar />
			<div class="hote-content-container">
				<el-table
					:data="floorList"
					style="width: 100%">
					<el-table-column
						prop="floorNum"
						label="楼层">
					</el-table-column>
					<el-table-column
						prop="roomNum"
						label="客房">
						<template scope="scope">
							<span class="area-room-table" v-for="item in scope.row.roomNum">{{item}}</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<style>
	.area-room-table {
		margin-right: 5px;	
	}
</style>

<script>
	import Header from '../../components/Header';
	import Sidebar from '../../components/Sidebar';

	export default {
		data() {
			return {
				floorList: [
					{
						id: '1',
						floorNum: 10,
						roomNum: [
							1001,
							1002,
							1003
						]
					}
				]
			}
		},
		components: {
			'hote-header': Header,
			'hote-sidebar': Sidebar
		}
	}
</script>